<!DOCTYPE html>
<html>
<head>
	<title>消息详情</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0, user-scalable=no"/>
	<script src="js/flexible.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<link rel="stylesheet prefetch" href="photoSwipe4.1.1/css/photoswipe.css">
	<link rel="stylesheet" type="text/css" href="photoSwipe4.1.1/css/default-skin/default-skin.css"/>
</head>
<body>
<div id="messageDetails">

	<ul class="messageUl">
		<li v-for="(item,i) in list">
			<div class="mesHeadBg">
				<div class="mesHead">
					<div class="headPortrait">
						<img onload="imgClass(event)" :src="item.headimg?imgUrl+item.headimg:'image/icon_head_normal.png'"/>
					</div>
					<span v-text="item.workerNickname"></span>
					<div class="time">
						<span v-text="item.createTime"></span>
					</div>
				</div>
				<div class="line"></div>
			</div>

			<div class="mesCont">
				<p class="mesTitle" v-text="item.content"></p>
				<!--<div class="imgsBg" :class="{imgLen1:item.urlImg.length==1,imgLens:item.urlImg.length>1}">-->
				<div class="imgsBg imgLens">
					<div class="my-gallery" data-pswp-uid="1">
						<figure v-for="subItem in item.urlImg">
							<div>
								<a :href="imgUrl+subItem" data-size="600x300">
									<img onload="imgClass(event)" :src="imgUrl+subItem">
								</a>
							</div>
						</figure>
					</div>
					<p>
						班组: <span v-text="groupName"></span>
					</p>
				</div>
			</div>
		</li>
	</ul>

	<div class="confirmBg" v-cloak>
		<div class="cfHead">
			<h3>已确认</h3>
			<span>
						<i v-text="messageUserListRead.length"></i>人>
					</span>
		</div>
		<div class="cfCont" :class="{more:moreRead}">
			<div class="userList">
				<ul>
					<li v-for="item in messageUserListRead">
						<div>
							<img onload="imgClass(event)" :src="item.headimg?imgUrl+item.headimg:'image/icon_head_normal.png'"/>
						</div>
						<p v-text="item.realname"></p>
					</li>
					<li @click="moreRead=false" class="imgInitial" v-show="messReadBtn">
						<div>
							<img src="image/more.png"/>
						</div>
						<p>收起</p>
					</li>
				</ul>
			</div>
			<div class="imgInitial moreBtn" @click="moreRead=true" v-show="messReadBtn">
				<div>
					<img src="image/more.png"/>
				</div>
				<p>更多</p>
			</div>
		</div>
	</div>

	<div class="confirmBg" v-cloak>
		<div class="cfHead">
			<h3>未确认</h3>
			<span>
						<i v-text="messageUserListUnread.length"></i>人>
					</span>
		</div>
		<div class="cfCont" :class="{more:moreUnread}">
			<div class="userList">
				<ul>
					<li v-for="item in messageUserListUnread">
						<div>
							<img onload="imgClass(event)" :src="item.headimg?imgUrl+item.headimg:'image/icon_head_normal.png'"/>
						</div>
						<p v-text="item.realname"></p>
					</li>
					<li @click="moreUnread=false" class="imgInitial" v-show="messUnreadBtn">
						<div>
							<img src="image/more.png"/>
						</div>
						<p>收起</p>
					</li>
				</ul>
			</div>
			<div class="imgInitial moreBtn" @click="moreUnread=true" v-show="messUnreadBtn">
				<div>
					<img src="image/more.png"/>
				</div>
				<p>更多</p>
			</div>
		</div>
	</div>
	<!--{{a}}-->
	<div id="replyBg">
		<div class="replyHead">
			<div>
				<img src="image/mes.png"/>
			</div>
			<span v-cloak>
						共<i v-text="messageReply.length"></i>条回复
					</span>
		</div>
		<ul
				v-infinite-scroll="loadMore"
				infinite-scroll-disabled="scrollLoading"
				infinite-scroll-distance="5"
		>
			<li v-for="item in messageReply" :itemId="item.id">
				<div class="headPortrait">
					<img onload="imgClass(event)" :src="item.headimg?imgUrl+item.headimg:'image/icon_head_normal.png'"/>
				</div>
				<div class="replyMes">
					<div class="replyMesHead">
						<span v-text="item.workerNickname?item.workerNickname:'　'"></span>
						<div class="time">
							<span v-text="item.createTime"></span>
						</div>
					</div>
					<p v-text="item.content"></p>
				</div>
			</li>
		</ul>

		<div class="loding" v-cloak>
			<mt-spinner style="margin: 0px auto;display: block;width: 30px;" v-show="loading" color="#666" :size="20"></mt-spinner>
			<p v-show="last" style="text-align: center; color:#666">没数据了</p>
		</div>
	</div>
	<div>

	</div>
</div>

<!--------------------------------------------图片放大插件--------------------------------------------------->
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

	<!-- Background of PhotoSwipe.
         It's a separate element as animating opacity is faster than rgba(). -->
	<div class="pswp__bg"></div>

	<!-- Slides wrapper with overflow:hidden. -->
	<div class="pswp__scroll-wrap">

		<!-- Container that holds slides.
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
		<div class="pswp__container">
			<div class="pswp__item"></div>
			<div class="pswp__item"></div>
			<div class="pswp__item"></div>
		</div>

		<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
		<div class="pswp__ui pswp__ui--hidden">

			<div class="pswp__top-bar">

				<!--  Controls are self-explanatory. Order can be changed. -->

				<div class="pswp__counter"></div>

				<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

				<!--<button class="pswp__button pswp__button--share" title="Share"></button>-->

				<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

				<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

				<!-- element will get class pswp__preloader--active when preloader is running -->
				<div class="pswp__preloader">
					<div class="pswp__preloader__icn">
						<div class="pswp__preloader__cut">
							<div class="pswp__preloader__donut"></div>
						</div>
					</div>
				</div>
			</div>

			<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
				<div class="pswp__share-tooltip"></div>
			</div>

			<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
			</button>

			<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
			</button>

			<div class="pswp__caption">
				<div class="pswp__caption__center"></div>
			</div>

		</div>

	</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/all.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js"></script>
<script src="js/axios.min.js"></script>
<script src="photoSwipe4.1.1/js/photoswipe.js" type="text/javascript" charset="utf-8"></script>
<script src="photoSwipe4.1.1/js/photoswipe-ui-default.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/message.js" type="text/javascript" charset="utf-8"></script>
<script>
    function clientWidth320(){
        if (document.documentElement.clientWidth<=320) {
            return true;
        }else{
            return false;
        }
    }
    var vm = new Vue({
        el: '#messageDetails',
        data:{
            //详情
            a:"",
            list:[],
            messageReply:"",
            group:{
                id:0,
                lastId:0,
                groupId:0,
                cid:0
            },
            groupName:'',

            //获取消息已读和未读的人员列表
            isview:-1,

            //未读人员
            messUnreadBtn:false,
            moreUnread:false,
            messageUserListUnread:[],

            //已读人员
            messReadBtn:false,
            moreRead:false,
            messageUserListRead:[],

            //消息回复
            messageReply:[],
            scrollLoading:false,
            loading:false,
            last:false
        },

        methods: {
            loadMore: function() {

                var lastData = this.messageReply[this.messageReply.length-1];
                this.findMessageReply(lastData.id);
            },

            query:function(){
                //单条消息
                this.group.id = GetQueryString("id");
                this.group.cid = GetQueryString("cid");
                this.group.groupId = GetQueryString("groupId");
				/*this.group.id = GetQueryString("id")||"671";
				 this.group.cid = GetQueryString("cid")||"11";
				 this.group.groupId = GetQueryString("groupId")||"10501";*/
                this.groupName = GetQueryString("groupName");
//						console.log(this.group)
                axios.post(url+"/migrant/getMigGroupMessage",this.group,{
                    headers:{"token":GetQueryString("token")}
                    //headers:{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpdyI6IlR1ZSBBdWcgMTUgMTc6MTQ6MzAgQ1NUIDIwMTcifQ.S6k4iRxnqEKtoWT4DiSYEVchOAFy1VaivQM2nXoaORsuserId:679"}
                }).then(function(data){
//							console.log(data)
                    var dataArr = data.data.data;
                    for (var i=0;i<dataArr.length;i++) {
                        var unixTimestamp = new Date(dataArr[i].createTime);
                        dataArr[i].createTime = unixTimestamp.toLocaleString();
                        if (dataArr[i].urlImg) {
                            dataArr[i].urlImg = dataArr[i].urlImg.split(',')
                        }
                    }
                    this.list.push.apply(this.list,dataArr);
                    Vue.nextTick(function(){
                        initPhotoSwipeFromDOM('.my-gallery');
                    });

                }.bind(this));

                //已回复未回复
                this.findMessageUser(0);
                this.findMessageUser(1);
                //获取消息回复列表
                this.findMessageReply(0);
            },
            //获取消息已确认和未确认
            findMessageUser:function(isview){
                var isView = isview;
                axios.get(url+"/migrant/findMessageUser",{
                    params: {
                        id:GetQueryString("id"),
                        // id:GetQueryString("id")||"671",
                        isview:isview
                    },
                    headers:{"token":GetQueryString("token")}
                    //headers:{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpdyI6IlR1ZSBBdWcgMTUgMTc6MTQ6MzAgQ1NUIDIwMTcifQ.S6k4iRxnqEKtoWT4DiSYEVchOAFy1VaivQM2nXoaORsuserId:679"}
                }).then(function(data){
                    if (isview) {
                        this.messageUserListRead = data.data.data
                    } else{
                        this.messageUserListUnread = data.data.data
                    }
                    if (clientWidth320()) {
                        if (this.messageUserListRead.length>=7 && isView==1) {
                            this.messReadBtn = true
                        }else if (this.messageUserListUnread.length>=7 && isView==0){
                            this.messUnreadBtn = true
                        }
                    }else{
                        if (this.messageUserListRead.length>=8 && isView==1) {
                            this.messReadBtn = true
                        }else if (this.messageUserListUnread.length>=8 && isView==0){
                            this.messUnreadBtn = true
                        }
                    }
                }.bind(this))
            },

            //获取消息回复列表
            findMessageReply:function(lastId){
                this.scrollLoading = true;
                this.loading = true;
                axios.get(url+"/migrant/findMessageReply",{
                    params: {
                        appId:GetQueryString("id"),
                        //appId:GetQueryString("id")||"671",
                        lastId:lastId
                    },
                    headers:{"token":GetQueryString("token")}
                    //headers:{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpdyI6IlR1ZSBBdWcgMTUgMTc6MTQ6MzAgQ1NUIDIwMTcifQ.S6k4iRxnqEKtoWT4DiSYEVchOAFy1VaivQM2nXoaORsuserId:679"}
                }).then(function(data){
					/*var t=data.data.data;*/
					/*t[t.length - 1].id*/
                    console.log(data)
                    for (var i=0,dataList=data.data.data;i<dataList.length;i++) {
                        var unixTimestamp = new Date(dataList[i].createTime);
                        dataList[i].createTime = unixTimestamp.toLocaleString();

                    }
                    this.messageReply.push.apply(this.messageReply,dataList);
                    this.a=this.messageReply
                    this.scrollLoading = false;
					/*this.scrollLoading = true;*/
                    this.loading = false;
                    if(dataList.length==0){
                        this.scrollLoading = true;
                        this.last = true;
                    }
                }.bind(this))
            }
        },
        mounted:function(){
            this.$nextTick(function(){   // 文档加载后调用
                this.query()
            })
        }
    })

    var initPhotoSwipeFromDOM = function(gallerySelector) {

        // 解析来自DOM元素幻灯片数据（URL，标题，大小...）
        // (children of gallerySelector)
        var parseThumbnailElements = function(el) {
            var thumbElements = el.childNodes,
                numNodes = thumbElements.length,
                items = [],
                figureEl,
                linkEl,
                size,
                item,
                divEl;

            for(var i = 0; i < numNodes; i++) {

                figureEl = thumbElements[i]; // <figure> element

                // 仅包括元素节点
                if(figureEl.nodeType !== 1) {
                    continue;
                }
                divEl = figureEl.children[0];
                linkEl = divEl.children[0]; // <a> element

                size = linkEl.getAttribute('data-size').split('x');

                // 创建幻灯片对象
                item = {
                    src: linkEl.getAttribute('href'),
                    w: parseInt(size[0], 10),
                    h: parseInt(size[1], 10)
                };



                if(figureEl.children.length > 1) {
                    // <figcaption> content
                    item.title = figureEl.children[1].innerHTML;
                }

                if(linkEl.children.length > 0) {
                    // <img> 缩略图节点, 检索缩略图网址
                    item.msrc = linkEl.children[0].getAttribute('src');
                }

                item.el = figureEl; // 保存链接元素 for getThumbBoundsFn
                items.push(item);
            }

            return items;
        };

        // 查找最近的父节点
        var closest = function closest(el, fn) {
            return el && ( fn(el) ? el : closest(el.parentNode, fn) );
        };

        // 当用户点击缩略图触发
        var onThumbnailsClick = function(e) {
            e = e || window.event;
            e.preventDefault ? e.preventDefault() : e.returnValue = false;

            var eTarget = e.target || e.srcElement;

            // find root element of slide
            var clickedListItem = closest(eTarget, function(el) {
                return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
            });

            if(!clickedListItem) {
                return;
            }

            // find index of clicked item by looping through all child nodes
            // alternatively, you may define index via data- attribute
            var clickedGallery = clickedListItem.parentNode,
                childNodes = clickedListItem.parentNode.childNodes,
                numChildNodes = childNodes.length,
                nodeIndex = 0,
                index;

            for (var i = 0; i < numChildNodes; i++) {
                if(childNodes[i].nodeType !== 1) {
                    continue;
                }

                if(childNodes[i] === clickedListItem) {
                    index = nodeIndex;
                    break;
                }
                nodeIndex++;
            }



            if(index >= 0) {
                // open PhotoSwipe if valid index found
                openPhotoSwipe( index, clickedGallery );
            }
            return false;
        };

        // parse picture index and gallery index from URL (#&pid=1&gid=2)
        var photoswipeParseHash = function() {
            var hash = window.location.hash.substring(1),
                params = {};

            if(hash.length < 5) {
                return params;
            }

            var vars = hash.split('&');
            for (var i = 0; i < vars.length; i++) {
                if(!vars[i]) {
                    continue;
                }
                var pair = vars[i].split('=');
                if(pair.length < 2) {
                    continue;
                }
                params[pair[0]] = pair[1];
            }

            if(params.gid) {
                params.gid = parseInt(params.gid, 10);
            }

            return params;
        };

        var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
            var pswpElement = document.querySelectorAll('.pswp')[0],
                gallery,
                options,
                items;

            items = parseThumbnailElements(galleryElement);

            // 这里可以定义参数
            options = {
                barsSize: {
                    top: 100,
                    bottom: 100
                },
                fullscreenEl : false,
                shareButtons: [
                    {id:'wechat', label:'分享微信', url:'#'},
                    {id:'weibo', label:'新浪微博', url:'#'},
                    {id:'download', label:'保存图片', url:'{{raw_image_url}}', download:true}
                ],

                // define gallery index (for URL)
                galleryUID: galleryElement.getAttribute('data-pswp-uid'),

                getThumbBoundsFn: function(index) {
                    // See Options -> getThumbBoundsFn section of documentation for more info
                    var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                        pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                        rect = thumbnail.getBoundingClientRect();

                    return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
                }

            };

            // PhotoSwipe opened from URL
            if(fromURL) {
                if(options.galleryPIDs) {
                    // parse real index when custom PIDs are used
                    for(var j = 0; j < items.length; j++) {
                        if(items[j].pid == index) {
                            options.index = j;
                            break;
                        }
                    }
                } else {
                    // in URL indexes start from 1
                    options.index = parseInt(index, 10) - 1;
                }
            } else {
                options.index = parseInt(index, 10);
            }

            // exit if index not found
            if( isNaN(options.index) ) {
                return;
            }

            if(disableAnimation) {
                options.showAnimationDuration = 0;
            }

            // Pass data to PhotoSwipe and initialize it
            gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
            gallery.init();
        };

        // loop through all gallery elements and bind events
        var galleryElements = document.querySelectorAll( gallerySelector );

        for(var i = 0, l = galleryElements.length; i < l; i++) {
            galleryElements[i].setAttribute('data-pswp-uid', i+1);
            galleryElements[i].onclick = onThumbnailsClick
        }

        // Parse URL and open gallery if it contains #&pid=3&gid=1
        var hashData = photoswipeParseHash();
        if(hashData.pid && hashData.gid) {
            openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
        }
    };

    // execute above function
    //initPhotoSwipeFromDOM('.my-gallery');

</script>
</body>
</html>